{% extends "base.html" %}

{% block title %}Patient Appointments - Admin Panel{% endblock %}

{% block content %}
<div class="container-fluid px-2 px-md-3 py-4">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="mb-0">
                        <i class="fas fa-calendar-check me-2"></i>Patient Appointments
                    </h2>
                    <p class="text-muted mb-0">{{ patient_user.name }} - All appointment records</p>
                </div>
                <div>
                    <a href="{{ url_for('admin.view_patient', patient_id=patient_user.id) }}"
                        class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Back to Patient
                    </a>
                </div>
            </div>

            <!-- Patient Info Card -->
            <div class="card qc-admin-card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="patient-avatar-small me-3">
                            {% if patient_user.profile_picture %}
                            <img src="{{ url_for('static', filename='uploads/' + patient_user.profile_picture) }}"
                                alt="{{ patient_user.name }}" class="img-fluid rounded-circle"
                                style="width: 100%; height: 100%; object-fit: cover;">
                            {% else %}
                            {{ patient_user.name[0].upper() }}
                            {% endif %}
                        </div>
                        <div>
                            <h5 class="mb-0">{{ patient_user.name }}</h5>
                            <p class="text-muted mb-0">{{ patient_user.email }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filter Tabs -->
            <div class="card qc-admin-card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body">
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link {% if current_status == 'all' %}active{% endif %}"
                                href="{{ url_for('admin.view_patient_appointments', patient_id=patient_user.id, status='all') }}">
                                All
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {% if current_status == 'pending' %}active{% endif %}"
                                href="{{ url_for('admin.view_patient_appointments', patient_id=patient_user.id, status='pending') }}">
                                Pending
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {% if current_status == 'approved' %}active{% endif %}"
                                href="{{ url_for('admin.view_patient_appointments', patient_id=patient_user.id, status='approved') }}">
                                Approved
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {% if current_status == 'completed' %}active{% endif %}"
                                href="{{ url_for('admin.view_patient_appointments', patient_id=patient_user.id, status='completed') }}">
                                Completed
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Appointments List -->
            <div class="card qc-admin-card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-header bg-white border-bottom py-3 px-4">
                    <h5 class="mb-0">
                        <i class="fas fa-list me-2"></i>Appointments
                    </h5>
                </div>
                <div class="card-body">
                    {% if appointments %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Time</th>
                                    <th>Doctor</th>
                                    <th>Type</th>
                                    <th>Disease Category</th>
                                    <th>Status</th>
                                    <th>Charges</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for appointment in appointments %}
                                <tr>
                                    <td>{{ appointment.appointment_date.strftime('%B %d, %Y') }}</td>
                                    <td>{{ appointment.appointment_time.strftime('%I:%M %p') }}</td>
                                    <td>
                                        <div>
                                            <strong>{{ appointment.doctor.user.name }}</strong><br>
                                            <small class="text-muted">{{ appointment.doctor.specialization }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <span
                                            class="badge badge-{{ 'success' if appointment.appointment_type == 'video' else 'primary' }}">
                                            {{ appointment.appointment_type.title() }}
                                        </span>
                                    </td>
                                    <td>{{ appointment.disease_category }}</td>
                                    <td>
                                        {% if appointment.status == 'pending' %}
                                        <span class="badge badge-secondary">
                                            Pending
                                        </span>
                                        {% else %}
                                        <span
                                            class="badge badge-{{ 'success' if appointment.status == 'completed' else 'warning' if appointment.status == 'approved' else 'info' }}">
                                            {{ appointment.status.title() }}
                                        </span>
                                        {% endif %}
                                    </td>
                                    <td>Rs. {{ appointment.charges }}</td>
                                    <td>
                                        <a href="{{ url_for('appointments.view_appointment', appointment_id=appointment.id) }}"
                                            class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-eye me-1"></i>View
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-calendar-times text-muted mb-3" style="font-size: 4rem;"></i>
                        <h5 class="text-muted">No appointments found</h5>
                        <p class="text-muted">This patient has no appointments with the selected filter.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .patient-avatar-small {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 1.2rem;
    }

    .nav-pills .nav-link.active {
        background-color: var(--primary-color);
        color: white;
    }

    .table th {
        border-top: none;
        font-weight: 600;
        color: var(--gray-700);
    }
</style>
{% endblock %}